---
// Using plain <img> because provided image paths are runtime strings from constants,
// which aren't compatible with astro:assets <Image /> metadata requirements.

interface Props {
  name: string
  image: string
}

const { name, image } = Astro.props
---

<div
  class="max-w-sm rounded-lg bg-gradient-to-br from-[#01315e] to-white p-6 text-gray-800 shadow-lg"
>
  <img
    src={image}
    alt={name}
    class="mb-2 rounded-md"
    loading="lazy"
    decoding="async"
    width="320"
    height="180"
  />

  <h2 class="mb-2 rounded-md bg-black px-4 py-2 text-center text-xl font-bold text-white">
    {name}
  </h2>
</div>
